<link rel="stylesheet" href="external/fuelux/css/fuelux-responsive.min.css" type="text/css" media="screen" />

<div>
    <div class="">
        <h2>Bordered Table</h2>
        <div class="table-responsive">
            <div id="grid"> </div>
            {literal}
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {                              
                                read: {
                                url: "index.php?controller=quizzes&action=get_all_json&ajax_action=1",
                                dataType: "json",
                                contentType: "application/json",
                                data: { zoneParent: "123" },

                            type: "POST"
                        },

                        parameterMap: function (data, operation) {
                            return kendo.stringify(data);
                        }

                    },
                    schema: {
                        model: {
                            fields: {
                                id: { type: "number" },
                                title: { type: "string" },

                                make_by: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 430,
                width:800,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                    field:"id",
                    filterable: false
                },
                "Title",
                {
                    field: "make_by",
                    title: "Make by",
                    width:160
                },
                { command: "destroy", title: "&nbsp;", width: 100 },
                ],
                editable: true
                });
                });
            </script>
            {/literal}
        </div>
    </div>
</div>
{literal}
<script type="text/javascript">
    dataSource=null;
    //$('#MyGrid').datagrid({ dataSource: dataSource, stretchHeight: true })
</script>
{/literal}